<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>我的任务</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <script src="${ctx}/js/changeSize.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
</head>
<style>
    html,body{
        background: #FAFAFA;
        min-height: 100vh;
    }
    [v-cloak] {
        display: none;
    }

    .task_list {
        /*padding: 0.5rem;*/
        margin-bottom: 0.5rem;
    }

    .task_header {
        background: #2D90B0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1rem;
    }

    .task_header .comeback {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
    }

    .record {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.6rem;
        height: 2.6rem;
    }

    .task_box {
        display: block;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        padding: 0.7rem 0.7rem 0.5rem;
        margin-bottom: 0.5rem;
        background: #fff;
        position: relative;
    }

    .task_detail {
        display: flex;
    }

    .task_detail img {
        margin-right: 0.6rem;
        width: 2.8rem;
        height: 2.8rem;
    }


    .title {
        margin-bottom: 0.65rem;
        font-size: 0.84rem;
        font-weight: 400;
        color: #666;
    }

    .describe {
        font-size: 0.7rem;
        color: #ACAEAD;
    }
    .tis{
        margin-top: 0.65rem;
        font-size: 0.65rem;
        color: #FF5C5D;
        font-weight: 400;
    }

    .describe i {
        color: #ff541f;
    }

    .get_money img{
        width: 4rem;
        height: 4rem;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
    }

    .check_box{
        width: 100%;
        border-top: 1px solid #F4F4F4;
        font-size: 0.7rem;
        margin-top: 1rem;
        padding-top: 0.5rem;
        display: flex;
        justify-content: inherit;
        align-items: center;
        color: #999;
        font-weight: 400;
    }
    .check_box img{
        height: 1.3rem;
    }


    .nav{
        position: relative;
        line-height: 1.2rem;
        padding: 0.5rem 0.8rem 0 0.8rem;
        font-size: 0.8rem;
        color: #999999;
        display: flex;
        justify-content: space-between;
    }
    .nav ul{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-around;
        font-weight: 400;
    }
    .nav ul li{
        height: 1.8rem;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,255,255,0)
    }
    .nav ul .act{
        color: #FF5C5D;
        border-bottom: 0.15rem solid  #FF5C5D;
        line-height: 1.4rem;
    }

    .screen img{
        width: 1rem;
    }


    .screen_con p{
        border-bottom: 0.08rem solid #F4F4F4;
    }
    .screen_con .screen_act{
        color: #FF5C5D;
        position: relative;
    }
    .screen_con .screen_act::after{
        content: '✔';
        color: #FF5C5D;
        position: absolute;
        right: 0;
    }
    .get_task {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem 0;
        background: rgba(255,255,255,0.8);
        /*background: #fff;*/
        z-index: 2;
        /*border-top: 0.2rem solid #F5F5F5;*/
    }

    .get_task div {
        text-align: center;
    }

    .get_task div .all {
        display: inline-flex;
        padding: 0 0.7rem;
        border-radius: 1rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        background: linear-gradient(to right, #FF7C5B , #FF595E);;
        color: #fff;
        font-size: 0.8rem;
        margin-left: 0.4rem;
    }
    .get_task div .all img{
        width: 0.6rem;
        margin-top: 0.65rem;
        height: 0.75rem;
    }
    .get_task div .right{
        padding-left: 2rem;
        padding-right: 0.3rem;
    }
</style>
<body>
<div id="app">
<#--    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=764127967&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:764127967:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
    <a href="http://wpa.qq.com/msgrd?v=3&uin=2406958639&site=qq&menu=yes">打开qq聊天框</a>-->
    <div class="task_list" v-cloak>
        <div class="nav">
            <ul>
                <li :class="navact===1?'act':''" @click="changeTag(1)">待完成</li>
                <li :class="navact===2?'act':''" @click="changeTag(2)">已完成</li>
                <li :class="navact===3?'act':''" @click="changeTag(3)">未通过</li>
            </ul>
        </div>
        <div class="task_box" v-for="(item,index) in taskList" :key="index"
             >
            <div @click="gotoDetail(item.category,item.taskId,item.needCheck)">
            <div class="task_detail">
                <img :src="item.icon">
                <div>
                    <p class="title">{{item.title}}</p>
                    <p class="describe">任务完成可获得佣金{{item.money}}元</p>
                    <#-- 待完成 -->
                    <p class="tis" v-if="item.status==='WaitSumbit'">待提交</p>
                    <p class="tis" v-if="item.status==='WaitCheckout'">请耐心等待审核</p>
                    <#-- 已完成 -->
                    <p class="tis" v-if="item.status==='CheckSuccess'">佣金已入账</p>
                    <#-- 未完成 -->
                    <p class="tis" v-if="item.status==='CheckFailure'">失败原因:{{item.mark}}</p>
                    <p class="tis" v-if="item.status==='redo'">失败原因:{{item.mark}}</p>
                </div>
            </div>
            <div class="get_money" v-if="item.status==='WaitSumbit'">
                <img src="${ctx}/image/jietu/await.png">
            </div>
            <div class="get_money" v-if="item.status==='WaitCheckout'">
                <img src="${ctx}/image/jietu/wait.png">
            </div>
            <div class="get_money" v-if="item.status==='redo'">
                <img src="${ctx}/image/jietu/waitResubmit.png">
            </div>
            <div class="get_money" v-if="item.status==='CheckSuccess'">
                <img src="${ctx}/image/jietu/success.png">
            </div>
            <div class="get_money" v-if="item.status==='CheckFailure'">
                <img src="${ctx}/image/jietu/not.png">
            </div>
            </div>
            <div class="check_box" v-if="item.status==='CheckSuccess'">
                <span>审核时间：{{item.checkTime}}</span>
               <#-- <img src="${ctx}/image/jietu/QQ.png">-->
            </div>
            <div class="check_box" v-if="item.status==='CheckFailure'">
                <span>审核时间：{{item.checkTime}}</span>
                <p  @click="getHref(item.qq)" style="z-index:999;"><img src="${ctx}/image/jietu/QQ.png"></p>
            </div>
            <div class="check_box" v-if="item.status==='redo'">
                <span>审核时间：{{item.checkTime}}</span>
                <p  @click="getHref(item.qq)" style="z-index:999;"><img src="${ctx}/image/jietu/QQ.png"></p>
            </div>
        </div>

        <p style="font-size: 0.7rem;color: #ccc;line-height: 1.5rem;text-align: center">暂无更多记录</p>
<#--        <div class="get_task">-->
<#--            <div>-->
<#--                <div class="all"><span>有1个任务待提交</span><span class="right">去提交</span><img src="${ctx}/image/jietu/RightArrow.png"></div>-->
<#--            </div>-->
<#--        </div>-->
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            taskList: [],
            navact:1,
            screenSwitch:false,
            screenType:0,
            size: 6,
            current: 1,
        },
        created: function(){
            var storage = window.sessionStorage;
            if(storage.getItem("category")){
                this.navact=Number(storage.getItem("category"));
            }
        },
        mounted: function () {

            //初始化页面
            this.getTask(1,999);
            window.refreshList = this.refreshList;
            // window.goRecordList = this.goRecordList;
             window.xy_web.showAndHideRecord(false);
        },
        methods: {
            // 获取列表信息
            getTask: function (current,size) {
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: "/newweb/task/history",
                    type: 'post',
                    async: false,
                    headers: JSON.parse(header),
                    data: {'category':that.navact,'page':current,'limit':size},
                   //  headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"46103debdcc145799abf6fc9b49eb4f8","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res) {
                            that.taskList = res.data;
                        } else {
                            console.log('fail');
                        }
                        window.xy_web.closeRefresh();
                    }
                });
            },

            // 跳转详情页
            gotoDetail: function (type, id, status) {

                window.xy_web.showLoading();
                var storage = window.sessionStorage;
                storage.setItem("category",this.navact);
                if (type === 'Common' || type ==='Redbook') {
                    // if (type === 'Soso') {
                    //     window.location.href = '/web/api/task/' + (!status && type === 'Soso'?'sosodetail':'checksoso') + '?type=' + type + '&taskId=' + id;
                    // }else {
                    //     window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                    // }
                    window.location.href = '/webapi/newweb/task/taskdetails?type=' + type + '&taskId=' + id;
                } else {
                    // window.location.href = "/web/api/task/comments?type=" + type + '&taskId=' + id;
                    window.location.href = "/webapi/newweb/task/commentsdetails?type=" + type + '&taskId=' + id;
                }
            },
            getHref(qq){
                if(this.isEmpty(qq)){
                    window.xy_web.showToast('该客服QQ未在线，请到我的页面联系其他客服');
                }else{
                    window.xy_web.openQQ(qq);
                }

               // return 'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes';
            },

            // 返回上一页
            comeback: function () {
                //location.href="/task/list/tasktemplatenew/taskList";
                window.history.back(-1);
            },

            // 刷新数据
            refreshList: function () {
                this.getTask(1,999);
            },
            showScreen(){
                let that=this;
                that.screenSwitch=true;
            },
            changeTag(category){
                let that=this;
                that.navact=category;
                that.getTask(1,999);
            },
            //判断字符是否为空的方法
            isEmpty(obj){
                if(typeof obj == "undefined" || obj == null || obj == ""){
                    return true;
                }else{
                    return false;
                }
            }
        },
        watch: {
            screenType() {
                this.screenSwitch=false
            },
            navact(){
                this.screenSwitch=false
            }
        }
    });
</script>
